How to Embed Windows Media Files

The example video clip on the right is an embedded Windows Media file. Embedded means that the player itself is embedded in the web page. For this to work the user must have Windows Media Player installed.

Embedding a video file is achieved by inserting a block of code in the web page's HTML. There are many variations on the code you can use, depending on whether you want to show video controls, status displays, etc.


The Code

The example below shows the code for embedding a Windows Media file. Note that it uses two tags: <object> and <embed>. This is to enable maximum browser compatibility.You will need to set the file name (and other attributes if required) for both tags. Use true or false for the <object> tag, 1 or 0 for the <embed> tag.

Code for HTML5:

<object id="MediaPlayer" width="192" height="190" type="video/x-ms-asf">
<param name="FileName"value="videofilename.wmv">
<param name="autostart" value="false">
<param name="ShowControls" value="true">
<param name="ShowStatusBar" value="false">
<param name="ShowDisplay" value="false">
<embed type="application/x-mplayer2" src="videofilename.wmv"
width="192" height="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0" />
</object>

Code for HTML 4.01:

<OBJECT ID="MediaPlayer" WIDTH="192" HEIGHT="190" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="videofilename.wmv">
<PARAM name="autostart" VALUE="false">
<PARAM name="ShowControls" VALUE="true">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<EMBED TYPE="application/x-mplayer2" SRC="videofilename.wmv" NAME="MediaPlayer"
WIDTH="192" HEIGHT="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </EMBED>
</OBJECT>

To get started, all you have to do is copy the code above into your web page and replace videofilename.wmv with your own file name.

If you want to get more advanced you can alter the parameters below. Note that including extra features such as the status bar requires the player to have more height. Where applicable, we have shown the number of pixels required — if necessary, add this number of pixels to the height parameter.

Autostart

If this value is set to true/1, the video will begin playback as soon as it has buffered. Otherwise it will wait for the user to press Play.

ShowControls

If this value is set to true/1, the video transport controls will be shown (play, stop, pause, etc). If it is set to false/0, the controls will not be shown and the user will not be able to control playback at all. Obviously, in this case you would need to have autostart enabled or there will be no way to play the video.

Height: 46 pixels

ShowStatusBar

If this value is set to true/1, the status bar is shown. This includes the buffering progress and playback status of the clip. Showing the status bar is a good idea as it shows the user how long they have to wait before the clip will be ready for playback

Height: 26 pixels

ShowDisplay

When set to true/1, this displays information such as the file name.

Height: 74 pixels


To see the settings above in action, see examples of embedded WinMedia files.

See also :